<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<style type="text/css">
	.button{width: 100px;height: 30px;margin:3px 20px 3px 0;padding-top: 3px;}
	*{font-size: 14px;}
	.th td{font-weight: 700;}
	/* label{margin: 0 10px 0 18px;font-weight: 500;height: 25px;line-height: 25px;} */
     .control-label{padding: 0;font-weight: bold;}
     .diaform{margin: 20px auto;}
     h3{border-bottom:1px solid #ddd;padding-bottom:5px;width: 98%;  }
     .datagrid-view{border-top:1px solid #ddd;margin-top: 8px;}
     .datagrid-pager{border-bottom:1px solid #ccc;}
     hr{margin:15px 0 13px 0 ;background-color: #ddd;height: 1px;border: 0; width: 120%;}
     .jianju{margin-left:15px; }
     .datagrid-htable{
     font-weight:bold;
	/* background-color: #148CCA; */
	}
	.demo_line_01{
    
    margin: 5px 0;
    font-size: 50px;
    line-height: 1px;
    text-align: center;
	}
	.demo_line_01 .line{
	display:inline-block;
	   width:47.8%;
	   height:1px;
	   background:#ddd;
	   vertical-align:middle;
	   margin-top:8px;
	}
	.container-fluid{
	padding-left: 15px;
	}
	.datagrid-ftable td div{
		font-size: larger;
	
	}
	#pulldown{
		margin-top: 20px;
	}
	
/* td.datagrid-header-over{
	background: #148CCA !important;
} */
</style>
<title>合同延迟服务费</title>
<style type="text/css">
.datagrid-ftable {
	color: red;
	font-weight: bold;
}
.datagrid-body {
height:300px !important;
}
.datagrid-view {
height:360px !important;
}

</style>
<script src="${ctxStatic}/js/echarts.js"></script>
</head>
<body>
<div class="jianju">
<h3>合同延迟服务费</h3>

<div>
	<div class="row">
		<div class="form-inline">
			&nbsp;&nbsp;&nbsp;
			<div class="input-group">
				<span class="input-group-addon">手机号码</span>
				<input id="phone1" class="form-control" style="color:blue" readonly value=${delay.phone } >
			</div>
			<div class="input-group">
				<span class="input-group-addon">客户姓名</span>
				<input id="customerName1" class="form-control" readonly value=${delay.customerName } >
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-inline">
			&nbsp;&nbsp;&nbsp;
			<div class="input-group">
				<span class="input-group-addon">合同本金</span>
				<input id="principal" class="form-control" readonly value=${delay.principal }  >
			</div>
			<div class="input-group">
				<span class="input-group-addon">服务费率</span>
				<input id="serFee" class="form-control" readonly size="14" value=${delay.serFee } >
				<span class="input-group-addon">%</span>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-inline">
			&nbsp;&nbsp;&nbsp;
			<div class="input-group">
				<span class="input-group-addon">合同生效日期</span>
				<input id="secInsDate" class="form-control" size="15.5" readonly value=${secInsDate } >
			</div>
			<div class="input-group">
				<span class="input-group-addon">合同期数</span>
				<input id="approvalCyc" class="form-control" readonly value=${delay.approvalCyc } >
			</div>
		</div>
	</div>
	<input id="ContractbaseId" type=hidden value=${ContractbaseId }/>

</div>
<table id="tabid" class="table table-striped">
		<thead>
			<tr id="ttr">
				<th data-options="field:'cyc',align:'left'" style="width:25%">期数</th>
				<th data-options="field:'expRepayDate',align:'left'" style="width:25%">预计还款日</th>
				<th data-options="field:'delayDay',align:'center'" style="width:25%">延迟天数</th>
				<th data-options="field:'delayInterest',align:'center'" style="width:25%">延迟服务费</th>
			</tr>
		</thead>
		<tbody>
            <c:forEach items="${delay.delyaMoneyList}" var="d" >
                <tr>
                    <td>
                            ${d.cyc}
                    </td>
                    <td>
                            ${d.expRepayDateStr}
                    </td>
                    <td>
                            ${d.delayDay}
                    </td>
                    <td>
                            ${d.delayInterest}
                    </td>
               	</tr>
             </c:forEach>
         </tbody>     	
</table>
<div >
	<div class="row">
		<div class="form-inline">
			&nbsp;&nbsp;&nbsp;
			<div class="input-group">
				<span class="input-group-addon">合同延迟服务费</span>
				<input id="sumAmount" class="form-control" readonly value=${delay.sumAmount } >
			</div>
			<div class="input-group">
				<span class="input-group-addon">已收延迟服务费</span>
				<input id="aceAmount" class="form-control" readonly value=${delay.aceAmount } >
			</div>
		</div>
	</div>
	<div class="row">
		<div class="form-inline">
			&nbsp;&nbsp;&nbsp;
			<div class="input-group">
				<span class="input-group-addon"><span style="color:red">*</span>应收延迟服务费</span>
				<input id="delayAmount" class="form-control" value=${delay.delayAmount }>
			</div>
	</div>	 
</div>
<div  >
     <input id="save" type="button" class="btn btn-success" value="保存" >
     <input id="return" type="button" class="btn btn-danger" value="返回" >
</div>
</div>
</body>
<script>
//点击电话号码进入客户详情页面
$(function (){
	$("#phone1").click(function(){
		location.href="${ctx}/delayMoney"
	})
})
//判断输入合不合法
$(function(){
	$("#delayAmount").blur(function(){
		var amount=$("#delayAmount").val();
		var reg = /(^[0-9]*[\.]{1}[0-9]{1,2}$)|(^[0-9]*$)/;
		var r=amount.match(reg);
		if(r==null){
			alert("只能输入数字,小数位最多两位")
		}
	})
})
//保存
$(function(){
	$("#save").click(function(){
		$.ajax({
			url:"${ctx}/delayMoney/save?ContractbaseId="+$("#ContractbaseId").val()+"&delayAmount="+$("#delayAmount").val(),
			contentType: "application/json; charset=utf-8",
			method:'get',
			data:"",
			success:function(data){
				if(data=="1"){
					$("#aceAmount").val($("#sumAmount").val()-$("#delayAmount").val())
					alert("保存成功")
				}
			}
	        })
	})
})
//返回
$(function(){
	$("#return").click(function(){
		location.href="${ctx}/delayMoney"
	})
})
</script>
</html>
